import { ProTableColumn, ProTableQueryItem } from '@/components/pro-table/type'
import { LogModel } from '@/api/model/log-model'
import { NDatePicker } from 'naive-ui'

type props = {
  getDate: () => any
}

export const useLogProTable = ({ getDate }: props) => {
  const query: ProTableQueryItem[] = [
    {
      type: 'input',
      title: '请求id',
      key: 'requestId'
    },
    {
      type: 'input',
      title: '用户名',
      key: 'userName'
    },
    {
      type: 'custom',
      title: '起止时间',
      key: 'range',
      span: 7,
      render(form) {
        if (!form.value.range) {
          const data = getDate()
          form.value.range = [data.startDate, data.endDate]
        }
        return (
          <NDatePicker
            v-model:formatted-value={form.value.range}
            valueFormat="yyyy-MM-dd"
            type="daterange"
          />
        )
      }
    }
  ]
  const columns: ProTableColumn<LogModel>[] = [
    {
      title: '请求id',
      key: 'requestId',
      align: 'center'
    },
    {
      title: '用户名',
      key: 'userName',
      align: 'center'
    },
    {
      title: '客户端ip',
      key: 'clientIp',
      align: 'center'
    },
    {
      title: '访问url',
      key: 'url'
    },
    {
      title: '状态码',
      key: 'status',
      align: 'center',
      type: 'tag',
      dictOptions: [
        {
          value: '200',
          label: '200',
          type: 'success'
        },
        {
          value: '401',
          label: '401',
          type: 'error'
        },
        {
          value: '403',
          label: '403',
          type: 'error'
        },
        {
          value: '404',
          label: '404',
          type: 'error'
        },
        {
          value: '500',
          label: '500',
          type: 'error'
        }
      ]
    },
    {
      title: '开始时间',
      align: 'center',
      key: 'startTime'
    },
    {
      title: '结束时间',
      align: 'center',
      key: 'endTime'
    },
    {
      title: '请求耗时（毫秒）',
      align: 'center',
      key: 'requestDuration',
      width: 150
    }
  ]

  return {
    query,
    columns
  }
}
